//目标1：设置频道下拉菜单
async function setChannleList() {
    //1.1 获取频道列表数据
    const resultlist = await axios({
        url: '/v1_0/channels'
    })
    const res = resultlist.data.channels.map(item => {
        return `<option value="${item.id}">${item.name}</option>`
    }).join('')
    //1.2 展示到下拉菜单中
    document.querySelector('.form-select').innerHTML = '<option value="" selected="">请选择文章频道</option>' + res
}
setChannleList()

//目标2：文章封面设置
//2.1 准备标签结构和样式
document.querySelector('.img-file').addEventListener('change', async e => {
    const file = e.target.files[0]
    //2.2 选择文件并保存在 FormData
    const fd = new FormData()
    fd.append('image', file)
    const res = await axios({
        url: '/v1_0/upload',
        method: 'POST',
        data: fd
    })
    //2.4 回显并切换 img 标签展示（隐藏 + 号上传标签）
    const imgUrl = res.data.url
    document.querySelector('.rounded').src = imgUrl
    document.querySelector('.rounded').classList.add('show')
    document.querySelector('.place').classList.add('hide')
})

document.querySelector('.rounded').addEventListener('click', () => {
    document.querySelector('.img-file').click()
})

/**
 * 目标3：发布文章保存
 *  3.1 基于 form-serialize 插件收集表单数据对象
 *  3.2 基于 axios 提交到服务器保存
 *  3.3 调用 Alert 警告框反馈结果给用户
 *  3.4 重置表单并跳转到列表页
 */
document.querySelector('.send').addEventListener('click', async e => {
    const form = document.querySelector('.art-form')
    const data = serialize(form, { hash: true, empty: true })

    data.cover = {
        type: 1,
        images: [document.querySelector('.rounded').src]
    }
    if (e.target.innerHTML === '发布') {
        try {
            await axios({
                url: '/v1_0/mp/articles',
                method: 'POST',
                data
            })
            myAlert(true, '发布成功')

            form.reset()

            document.querySelector('.rounded').src = ''
            document.querySelector('.rounded').classList.remove('show')
            document.querySelector('.place').classList.remove('hide')

            editor.setHtml('')

            setTimeout(() => {
                location.href = '../content/index.html'
            }, 1500)
        } catch (error) {
            myAlert(false, error.response.data.message)
        }
    }
    else {
        try {
            const res = await axios({
                url: `/v1_0/mp/articles/${data.id}`,
                method: 'PUT',
                data
            })
            myAlert(true, '修改成功')
            form.reset()
            editor.setHtml('')
            setTimeout(() => {
                location.href = '../content/index.html'
            }, 1500)
        } catch (error) {
            myAlert(false, error.response.data.message)
        }
    }
});

/**
 * 目标4：编辑-回显文章
 *  4.1 页面跳转传参（URL 查询参数方式）
 *  4.2 发布文章页面接收参数判断（共用同一套表单）
 *  4.3 修改标题和按钮文字
 *  4.4 获取文章详情数据并回显表单
 */

(function () {
    const paramsStr = location.search
    const params = new URLSearchParams(paramsStr)
    params.forEach(async (key, value) => {
        if (value === 'id') {
            document.querySelector('.title').innerHTML = `<span>修改文章</span>`
            document.querySelector('.send').innerHTML = '修改'
            const res = await axios({
                url: `/v1_0/mp/articles/${key}`
            })
            const { channel_id, id, content, cover, pub_date, title } = res.data
            console.log(res.data);
            const queryObj = {
                channel_id,
                title,
                rounded: cover.images[0],
                content,
                id
            }
            Object.keys(queryObj).forEach(key => {
                if (key === 'rounded') {
                    if (queryObj[key]) {
                        document.querySelector('.rounded').src = queryObj[key]
                        document.querySelector('.rounded').classList.add('show')
                        document.querySelector('.place').classList.add('hide')
                    }
                } else if (key === 'content') {
                    editor.setHtml(queryObj[key])
                } else {
                    document.querySelector(`[name=${key}]`).value = queryObj[key]
                }
            })
        }
    })
})();

/**
 * 目标5：编辑-保存文章
 *  5.1 判断按钮文字，区分业务（因为共用一套表单）
 *  5.2 调用编辑文章接口，保存信息到服务器
 *  5.3 基于 Alert 反馈结果消息给用户
 */